<template>
  <div class="logo">
    <div class="container">
      <img src="/imgs/login-logo.png" alt="" />
    </div>
    <div class="wrapper">
      <div class="container">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <div class="account">
            <span>账号登录</span>
            <span>|</span>
            <span>扫码登录</span>
          </div>
          <el-form-item prop="username">
            <el-input
              v-model="ruleForm.username"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <div class="btn" @click="login">登录</div>
          <div class="resign">
            <div class="resign-left">手机短信登录/注册</div>
            <div class="resign-right">
              <span>立即注册</span>
              <span>|</span>
              <span>忘记密码？</span>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <NavFooter />
  </div>
</template>

<script>
import NavFooter from "@/components/NavFooter";
import {mapActions} from 'vuex'
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        userId: "",
      },
      rules: {},
    };
  },
  components: {
    NavFooter,
  },
  methods: {
    login() {
      let { username, password } = this.ruleForm;
      this.axios
        .post("/user/login", {
          username,
          password,
        })
        .then((res) => {
          this.$cookie.set("userId", res.id, { expires: "Session" });
          // this.$store.dispatch('saveUserName',res.username)
          this.saveUserName(res.username)
          this.$router.push({
            name:"index",
            params:{
                from:'login'
            }
          });
        });
    },
    ...mapActions(['saveUserName'])
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/config.scss";
@import "@/assets/scss/mixin.scss";
.logo {
  & > .container {
    height: 113px;
    img {
      width: auto;
      height: 100%;
    }
  }
  .wrapper {
    background: url("/imgs/login-bg.jpg") no-repeat center;
    .container {
      height: 576px;
      display: flex;
      align-items: center;
      position: relative;
    }
    /deep/ .el-form {
      width: 410px;
      height: 510px;
      background-color: $colorG;
      position: absolute;
      right: 0;
      padding: 0 13px;
      .account {
        padding: 40px 0 49px;
        @include flex(center);
        span {
          font-size: $fontE;
          color: $colorI;
          font-weight: 700;
        }
        span:nth-child(1) {
          color: $colorA;
        }
        span:nth-child(2) {
          padding: 0 32px;
        }
      }
      .el-input__inner {
        height: 50px;
        padding: 18px;
      }
      .btn {
        width: 100%;
        margin-top: 10px;
        background-color: $colorA;
        height: 50px;
        line-height: 50px;
        color: $colorG;
        font-size: $fontI;
        border-radius: 4px;
      }
      .resign {
        margin-top: 14px;
        font-size: $fontJ;
        @include flex();
        .resign-left {
          color: $colorA;
        }
        .resign-right {
          color: $colorD;
          span:nth-child(2) {
            padding: 0 10px;
          }
        }
      }
    }
  }
  /deep/ .footer {
    padding: 60px 0;
    background-color: #fff;
    border: none;
    height: 100px;
  }
}
</style>